<template>
  <div>
  <div class="home" v-if="$route.path==='/home'">
    <van-search v-model="SearchVal" placeholder="请输入搜索关键词" disabled shape="round" @click="gotoSearchPop"/>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="black">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img :src="item.image_url" width="100%" alt="暂无图片" style="display: block;" >
      </van-swipe-item>
    </van-swipe>
    <!--channel-->
    <van-grid :column-num="5">
      <van-grid-item v-for="item in channel"
                     :icon="item.icon_url"
                     :text="item.name"
                     :key="item.id"
                     :url="item.url"
      />
    </van-grid>

    <div class="title">
      品牌制造商直供
    </div>
    <ul class="brand">
      <li v-for="item in brandList" :key="item.id">
          <img :src="item.pic_url" alt="" width="">
          <h4>{{item.name}}</h4>
          <p>{{item.floor_price | priceFormat}}</p>
      </li>
    </ul>
  </div>
    <transition name="slide">
      <router-view v-if="$route.path==='/home/searchpop'"></router-view>
    </transition>
  </div>
</template>

<script>
import {getHomeData} from '@/request/api'
export default {
  name: "Home",
  data() {
    return {
      SearchVal: '',
      banner:[],
      channel:[],
      brandList:[],
    }
  },
  created() {
  this.getHomeData();
  },
  methods:{
    async getHomeData(){
      const {data:res} = await getHomeData();
      this.banner = res.data.banner;
      this.channel = res.data.channel;
      this.brandList = res.data.brandList;
      // console.log(res)
    },
    gotoSearchPop(){
      this.$router.push('/home/searchpop')
    }
  }
}
</script>

<style lang="less" scoped>
 .slide-enter,.slide-leave-to{
    right: -100%;
 }
 .slide-enter-active,.slide-leave-active{
    transition: right .5s ease;
 }
 .slide-enter-to,.slide-leave {
    right: 0;
 }
 .title {
   margin-top: .2rem;
   text-align: center;
   height: .5rem;
   line-height: .5rem;
   background-color: #fff;
 }

 .brand {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   background-color: #fff;
   li {
     width: 49%;
     position: relative;
     margin-bottom: .1rem;
     img {
       width: 100%;
       display: block;
     }
     h4 {
       position: absolute;
       top: 0;
       left: 10px;
       line-height: .4rem;
     }
     p {
       position: absolute;
       top: 20px;
       left: 10px;
       color: darkred;
       line-height: .4rem;
     }
   }
 }
</style>